<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		li{
			list-style: none;
			width: 100px;
			height: 50px;
			float: left;
			line-height: 50px;
			text-align: center;
			border: 1px solid #666;
		}
		.ppap{
			clear: both;
			width: 713px;
			height: 500px;
			background-color: #253;
			font-size: 100px;
			border: 1px solid #147;
			margin-left:40px;
			display: none;
		}
		.show{
			display: block;
		}
	</style>
</head>
<body>
	<ul>
		<li>人</li>
		<li>生</li>
		<li>若</li>
		<li>只</li>
		<li>如</li>
		<li>初</li>
		<li>见</li>
	</ul>
	<div class="app">
		<div class="ppap show">1</div>
		<div class="ppap">2</div>
		<div class="ppap">3</div>
		<div class="ppap">4</div>
		<div class="ppap">5</div>
		<div class="ppap">6</div>
		<div class="ppap">7</div>
	</div>
	<script type="text/javascript" src="../JQuery/jquery-1.11.1.js"></script>
	<script>
		$("ul li").mouseover(function(){
			var s = $(this).index()
			console.log(s)
			$(".ppap").eq(s).addClass("show").siblings().removeClass("show");
		})
	</script>
</body>
</html>